<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>

  /*产生闭包了  Note
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。
*/
    var add = (function () {
        var counter = 0;          //保持局部变量被引用 不会轻易销毁

        console.log(counter);     //立即执行函数，初始化的时候只打印一次

        return function () {return counter += 1;}
    })();


    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }


    /*立即执行函数
    * 初始化之后相当于
    *  var add=function () {return counter += 1;}
    *
    * 并且保持对 局部变量counter的引用  这就是闭包的好处   防止 局部变量 污染 全局变量
    *
    * */

</script>

</body>
</html>